<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0,user-scalable=no">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <meta name="robots" content="noindex,nofollow">
  <base target='_parent' />
  <script src="/theme/system/assets/ad_payment.js"></script>
  <script>
    window['current_payment_type'] = 'AB';
    storeConfig = {$storeConfig};
  </script>
  <style>
    *{
      padding: 0;
      margin: 0;
    }
  </style>
</head>

<body class="--body-style">
  <div id="pacypay_checkout-form">
    <div id='pacypay_checkout' style="height: 330px;"></div>
    <div id='pacypay_checkout_btn'></div>
    <div id="pacypay-message"></div>
  </div>
  <script>
    $(function () {
      var pacypay;
      var payHideLoading;
      function getPacypayTransactionId(enabledButton) {
        var javaEnabled = navigator.javaEnabled() || window.navigator.javaEnabled()
        var colorDepth = window.screen.colorDepth
        var screenHeight = window.screen.height
        var screenWidth = window.screen.width
        var timeZoneOffset = new Date().getTimezoneOffset()
        var userAgent = navigator.userAgent.toString()
        var language = navigator.language || window.navigator.language
        $.ajax({
          type: 'post',
          url: "/homeapi/checkouts/payment/pacypayinlinepayment/doPay",
          dataType: 'json',
          data: {
            order_number: '{$orderNumber}',
            local_token: '{$this->token}',
            payment_id: '{$this->payment->id}',
            javaEnabled: javaEnabled,
            colorDepth: colorDepth,
            screenHeight: screenHeight,
            screenWidth: screenWidth,
            timeZoneOffset: timeZoneOffset,
            userAgent: userAgent,
            language: language,
          },
          complete: function () {
            enabledButton && enabledButton();
          },
          success: function (res) {
            if (typeof res != "object") {
              res = JSON.parse(res)
            }
            if (res.code == 2) {
              pacypayInit(res.transactionId)
            } else if (res.code == 1) {
              window.top.location.href = res.url;
            } else {
              $.toast({ container: "#pacypay-message", text: res.msg })
            }
          },
          error: function (error) {
            console.log(error)
          }
        })
      }

      function pacypayInit(pacypayTransactionId){
        if (pacypayTransactionId) {
            pacypay = new Pacypay(pacypayTransactionId, {
              locale: 'en', // en zh-cn ar de es fi fr it ja ko nl no pl pt ru sv th zh-tw
              environment: '$environment', // sandbox、production
              config: {
                subProductType: 'DIRECT', // DIRECT-直接支付，TOKEN-token绑卡并支付（必须和下单接口中subProductType值保持一致）
                checkoutTheme: 'light', // light、dark
                customCssURL: '', // 自定义样式链接地址，配置该值后，checkoutTheme 则无效
                variables: {
                  "colorBackground": "white", // 主题背景色
                  "colorPrimary": "#7d7d7d", // 主题色，如输入框高亮、光标颜色
                  "colorText": "black", // 字体颜色
                  "colorDanger": "#ff0000", // 错误提示颜色
                  "borderRadius": "2px", // 输入框角度
                  "fontSizeBase": "16px", // 基础字体大小，会按照该基准进行缩放
                  "fontFamily": "Arial, sans-serif", // 字体样式
                },
                // 如果想自定义所有样式则只用配置styles. checkoutTheme,customCssURL,variables都可以不传
                // 详情请看styles属性说明
                styles: {
                  ".pacypay-checkout__button--pay": { // 支付按钮样式
                    "background-color": "#2277C8",
                  },
                  ".pacypay-checkout__spinner": {
                    "border": "3px solid #fff !important",
                  }
                },
                showPayButton:false
              },
              onPaymentCompleted: function (res) {
                //成功支付后回调方法
                const txtInfo = res.data; // 返回交易结果详情
                const respCode = res.respCode; // 响应码
                const respMsg = res.respMsg; // 响应信息
                if (respCode === '20000') { // respCode 为 20000 表示交易正常
                  switch (txtInfo.status) { // 交易状态判断
                    case 'S': // status 为 'S' 表示成功
                      // 支付最终状态以异步通知结果为准
                      window.top.location.href = "{$successUrl}";
                      break;
                    case 'R': // status 为 'R' 表示需要3ds验证
                      // 当交易状态为 R 时，商户需要重定向到该URL完成部分交易，包括3ds验证
                      window.top.location.href = txtInfo.redirectUrl;
                      break;
                  }
                } else {
                  $.toast({ container: "#pacypay-message", text: res.respMsg })
                  getPacypayTransactionId()
                  payHideLoading && payHideLoading();
                }
              },
              onError: function (err) {
                $.toast({ container: "#pacypay-message", text: "Payment Request Invalid" })
                //支付异常回调方法 
                console.log(err);
                payHideLoading && payHideLoading();
              }
            });
          }
      }

      $.createPaymentCard({
        src: "$jsSrc",
        button: "#pacypay_checkout_btn",
        form: "#pacypay_checkout-form",
        async scriptSuccess({ disableButton, enabledButton }) {
          disableButton();
          getPacypayTransactionId(enabledButton)
        },
        async verified() {
          return true
        },
        async submit({ showLoading, hideLoading }) {
          showLoading();
          payHideLoading = hideLoading;
          pacypay.submit();
          // hideLoading()
        }
      })
    })
  </script>
</body>
</html>

<!-- ab -->
<div id="pcloverinlinepayment" style='border:none;position: relative;'>
  <iframe id="pcloverinlinepaymentIframe" style='width:100%;border:none;' src="{$src}" ></iframe>
</div>
<script>
  $(function () {
    $.paymentAPostMessage({
      form: "#pcloverinlinepayment",
      iframe: "#pcloverinlinepaymentIframe",
    })
  })
</script>


